<template>
  <van-tabbar route active-color="#fd4f51">
    <van-tabbar-item replace to="/">
      <span>商品</span>
      <svg-icon
        class="icon"
        slot="icon"
        slot-scope="props"
        :class="{'text-red': props.active}"
        :name="props.active ? 'goods-active': 'goods'"
      ></svg-icon>
    </van-tabbar-item>
    <van-tabbar-item replace to="/order">
      <span>会员预定</span>
      <svg-icon
        class="icon"
        slot="icon"
        slot-scope="props"
        :class="{'text-red': props.active}"
        :name="props.active ? 'order-active': 'order'"
      ></svg-icon>
    </van-tabbar-item>
    <van-tabbar-item replace to="/user">
      <span>我的</span>
      <svg-icon
        class="icon"
        slot="icon"
        slot-scope="props"
        :class="{'text-red': props.active}"
        :name="props.active ? 'user-active': 'user'"
      ></svg-icon>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.icon {
  transition: all .3s;
}
</style>
